import { useState } from 'react';
import './index.css';

type TOption = {
   value: string;
   label: string;
   icon?: string;
};
type TRadioButtonProps = {
   value?: string;
   onChange?: (value: string) => void;
   disabled?: boolean;
   options: Array<TOption>;
};

const RadioButton = ({
   value: valueProp,
   onChange,
   disabled = false,
   options,
}: TRadioButtonProps) => {
   const [value, setValue] = useState(valueProp);

   const handleChange = (value: string) => {
      if (!disabled) {
         onChange && onChange(value);
         setValue(value);
      }
   };

   return (
      <div className="radio-button-group">
         {options.map((item) => (
            <div
               className={`radio-option ${
                  value === item.value ? 'checked' : ''
               }`}
               key={item.value}
               onClick={handleChange.bind(null, item.value)}
            >
               {item.label}
            </div>
         ))}
      </div>
   );
};

export default RadioButton;
